<template>
  <div id="upUser">
    <el-row :gutter="10" class="col-header">
      <el-col :span="24">User/CenTer</el-col>
    </el-row>
    <el-row :gutter="10" class="col-mian">
      <el-col :span="18">
        <el-tabs tabPosition="left" style="height: 100%; width: 900px">
          <el-tab-pane label="个人中心">
            <el-form ref="form" :model="ruleForm" label-width="150px">
              <el-form-item label="账号" prop="fullname">
                <el-input v-model="loginlist.role"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pwd">
                <el-input v-model="loginlist.password"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="loginlist.name"></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input v-model="loginlist.age"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="number">
                <el-input v-model="loginlist.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="emali">
                <el-input v-model="loginlist.emali"></el-input>
              </el-form-item>
              <div style="margin: 20px 75px">
                <div class="upload">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <el-button size="small" type="primary"
                      >点击上传头像</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <el-button class="btng" size="mini" type="success"
                    >更新个人信息</el-button
                  >
                </div>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="我的收藏">
            <div class="demo-image__lazy">
              <el-image
                v-for="url in urls"
                :key="url"
                :src="url"
                :scroll-container="3000"
              ></el-image>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Users",
  data() {
    return {
      ruleForm:{},
      urls: [
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
        "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
        "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
      ],
      loginlist:{}
    };
  },
  created() {
    this.loginlist = this.$store.state.login.loginName
    // console.log(this.loginName);
  },
};
</script>

<style lang="scss" scoped>
body,
html {
  padding: 0px;
  margin: 0px;
}
#upUser {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}
.col-mian {
  width: 1000px;
  margin: 0 auto !important;
}
.col-header {
  font-size: 40px;
  font-weight: 300;
}
.col-left {
  background-color: rgb(228, 228, 228);
  height: 550px;
  width: 1000px;
}
.el-tab-pane {
  font-size: 20px;
  font-weight: 500;
  width: 700px;
}
.upload-demo {
  margin-left: 150px;
  width: 200px;
}
.btng {
  height: 35px;
}
.upload {
  display: flex;
  justify-items: right;
}
.el-collapse {
  padding: 20px;
}
.el-form {
  height: 560px;
  .el-form-item {
    margin-top: 30px;
  }
}
</style>